<template>
  <div>
    <div class="wagePay">
      <div style="height:calc(100vh - 12rem)">
        <div class="topContent flexBetween">
          <!-- 概览 -->
          <div class="topContent-Left">
            <div style="position:absolute;top:-1rem;left:0">
              <img src="@/assets/img/laborDataCenter/topLine.png" alt />
            </div>
            <div style="position:absolute;bottom:-0.9rem;right:0">
              <img src="@/assets/img/laborDataCenter/bottomLine.png" alt />
            </div>
            <LaborOverview style="width:100%" />
          </div>
          <!-- 登记 -->
          <div class="topContent-right">
       
              <div style="position:absolute;top:-1rem;left:0">
                <img src="@/assets/img/laborDataCenter/topLine.png" alt />
              </div>
              <div style="position:absolute;bottom:-0.9rem;right:0">
                <img src="@/assets/img/laborDataCenter/bottomLine.png" alt />
              </div>
         

           
              <LaborInfoRegist />
           
          </div>
        </div>
        <div class="bottomContent flexBetween">
          <div style="width: 66%;" class="flexBetween">
            <!-- 第一部分 -->
            <div class="bottomContentPartLeft">
              <div style="position:absolute;top:-1rem;left:0">
                <img src="@/assets/img/laborDataCenter/topLine.png" alt />
              </div>
              <div style="position:absolute;bottom:-0.9rem;right:0">
                <img src="@/assets/img/laborDataCenter/bottomLine.png" alt />
              </div>
              <UnitDistributionStatistics />
            </div>
            <!-- 第二部分 -->
            <div class="bottomContentPartLeft">
              <div style="position:absolute;top:-1rem;left:0">
                <img src="@/assets/img/laborDataCenter/topLine.png" alt />
              </div>
              <div style="position:absolute;bottom:-0.9rem;right:0">
                <img src="@/assets/img/laborDataCenter/bottomLine.png" alt />
              </div>
              <MeasurementStatistical />
            </div>
          </div>

          <!-- 第三部分 -->
          <div class="bottomContentPart" style="padding:0">
            <div style="position:absolute;top:-1rem;left:0">
              <img src="@/assets/img/laborDataCenter/topLine.png" alt />
            </div>
            <div style="position:absolute;bottom:-0.9rem;right:0">
              <img src="@/assets/img/laborDataCenter/bottomLine.png" alt />
            </div>
            <LaborManager />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import LaborOverview from './laborOverview/index'
import LaborInfoRegist from './laborInfoRegist/index'
import LaborManager from './laborManager/index'
import MeasurementStatistical from './measurementStatistical/index'
import UnitDistributionStatistics from './unitDistributionStatistics/index'
import TopMenu from '@/views/home/projectDataCenter/topMenu/index.vue'
export default {
  components: {
    LaborOverview,
    LaborInfoRegist,
    LaborManager,
    MeasurementStatistical,
    UnitDistributionStatistics,
    TopMenu
  }
}
</script>

<style scoped>
.topContent {
  margin-bottom: 1.5%;
  height: 55%;
}
.bottomContent {
  height: 38%;
}
.topContent-Left {
  width: 66%;
  height: 100%;
  background: rgba(0, 246, 255, 0.05);
  position: relative;
  /* margin-bottom: 1%; */
  padding: 1.5rem;
}
.topContent-right {
  width: 30%;
  height: 100%;
  background: rgba(0, 246, 255, 0.05);
  position: relative;
  padding: 1.5rem;
}
.bottomContentPartLeft,
.bottomContentPart {
  width: 30%;
  height: 100%;
  background: rgba(0, 246, 255, 0.05);
  position: relative;
  /* opacity: 0.05; */
  padding: 1.5rem;
}
.bottomContentPartLeft {
  width: 47%;
}

</style>